<template>
  <div class="search-page">
    <!-- 搜索栏 -->
    <form class="search-form" action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        background="#3296fa"
        @search="onSearch"
        @cancel="onCancel"
        @focus="getFocus"
      />
    </form>

    <!-- 搜索结果组件 -->
    <search-record v-if="isShow" :values="value" />

    <!-- 联想建议组件 -->

    <search-advice v-else-if="value" @search="onSearch" :values="value" />

    <!-- 搜索历史组件 -->
    <search-history v-else :Historys="Historys" @search="onSearch" />
  </div>
</template>

<script>
import searchHistory from "./components/search-history";
import searchAdvice from "./components/search-advice";
import searchRecord from "./components/search-record";
import { cun, qu } from "@/utils/Storage";
export default {
  // 组件名称
  name: "SearchPage",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    searchHistory,
    searchAdvice,
    searchRecord,
  },
  // 组件状态值
  data() {
    return {
      value: "",
      isShow: false,
      Historys: qu("toutiao-historys") || [], //存放历史记录
    };
  },
  // 计算属性,
  computed: {},
  // 侦听器
  watch: {
    Historys(value) {
      // 将数据存到本地
      cun("toutiao-historys", value);
    },
  },
  // 组件方法
  methods: {
    onSearch(val) {
      // 更新文本框内容
      this.value = val;

      // 判断数组中是否有相同的数据
      const zhi = this.Historys.indexOf(val);
      if (zhi != -1) {
        this.Historys.splice(zhi, 1);
      }
      // 将结果存入数组中
      this.Historys.unshift(val);

      // 渲染搜索结果
      this.isShow = true;
    },
    onCancel() {
      // 回退到上一级
      this.$router.back();
    },
    getFocus() {
      this.isShow = false;
    },
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
};
</script>

<style scoped lang="less">
.search-page {
  padding-top: 108px;
  .van-search__action {
    color: #fff;
  }
  .search-form {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
}
</style>
